<template>
<div>
  <!-- 头部导航的公共组件 -->
  <head-view></head-view>
  <!-- 轮播图和商品 -->
  <div class="home">
    <div class="w-box">
      <!-- 跑马灯 组件 -->
      <el-carousel :interval="5000" indicator-position="outside" arrow="always">
        <!-- v-for循环 -->
        <el-carousel-item v-for="item in banner" :key="item.id">
          <img v-if='item.picUrl' class="img" :src="item.picUrl" alt="">
          <img v-if='item.picUrl2' class="img2" :src="item.picUrl2" alt="">
          <img v-if='item.picUrl3' class="img3" :src="item.picUrl3" alt="">
        </el-carousel-item>
      </el-carousel>
    </div>
    <!-- 商品卡片 -->
    <!-- v-for循环 -->
    <div v-for="item in homeList" :key="item.id">
      <div class="card">
        <!-- v-if判断 -->
        <section class="w mt30 clearfix" v-if="item.type===3">
          <!-- 调用组件 -->
          <m-shelf :title="item.name">
            <!-- 具名插槽 -->
            <div slot="content" class="floors">
              <!-- 调用组件 -->
              <mall-goods v-for='(o, i) in item.panelContents' :key="i" :goods='o'>
              </mall-goods>
            </div>
          </m-shelf>
        </section>
      </div>
    </div>
  </div>
  <!-- 引入公共组件 -->
  <footer-view></footer-view>
</div>
</template>

<script>
    // 引入复用组件
    import MShelf from '@/components/Shelf'
    import MallGoods from '@/components/MallGoods'
    export default {
        data() {
            return {
                // 轮播图放数据的地方
                banner: [],
                // home所有数据
                homeList: []
            }
        },
        // 组件
        components: {
            MShelf,
            MallGoods
        },
        async created() {
            try {
                const res = await this.$http.get('http://47.106.237.228:3001/api/home')
                    // console.log(res);
                    //res得到所有请求来的数据,async和await是promise的数据转化一下
                    // 拿到data数据
                let data = res.data;
                // console.log(data)
                if (data.code === 200) {
                    // 拿到data下的result
                    let result = data.result;
                    console.log(result)
                        // 赋值
                    this.homeList = result
                        // 拿到item=0的数据
                    let item = result.find(item => item.type === 0);
                    // 返回数据，赋值
                    this.banner = item.panelContents
                        // console.log(result)

                }
            } catch (error) {
                console.log(error.message);
            }
        }
    }
</script>

<style lang="less" scoped>
    .home {
        width: 1200px;
        margin: 0px auto;
    }
    
    .w-box {
        width: 1200px;
        height: 300px;
        margin: 0 auto;
        background-color: #eeeeee;
    }
    
    .img {
        display: block;
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        border-radius: 10px;
    }
    
    .img2 {
        display: block;
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        border-radius: 10px;
    }
    
    .img3 {
        display: block;
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        border-radius: 10px;
    }
    
    .card {
        margin-top: 30px;
    }
    
    .floors {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        .imgbanner {
            width: 50%;
            height: 430px;
            .cover-link {
                cursor: pointer;
                display: block;
                position: absolute;
                top: 60px;
                left: 0;
                width: 50%;
                height: 430px;
                z-index: 4;
                background: url() repeat;
            }
            .cover-link:hover {
                box-shadow: inset 0 0 38px rgba(0, 0, 0, 0.08);
                transition: all 0.15s ease;
            }
        }
        img {
            display: block;
            width: 100%;
            height: 100%;
        }
    }
</style>